<template>
  <div class="">
    <!--<div style="margin-top: -17px; padding: 10px;">
      <Button class="m-r-5px" type="default" size="small" @click="allShowAndHide('show')">全部显示</Button>
      <Button type="default" size="small" @click="allShowAndHide('hide')">全部隐藏</Button>
    </div>-->
    <Table highlight-row size="small"
           :columns="structureTreeColumns" :data="structureTreeData"></Table>
  </div>
</template>

<script>

  import StructureTreeTableExpand from './StructureTreeTableExpand'

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getField',
    mutationType: 'designer/updateField',
  });

  export default {
    name: 'StructureTreeTable',
    data() {
      return {
        structureTreeColumns: [ // 结构树表头数据
          {
            type: 'expand',
            width: 30,
            render: (h, params) => {
              return h(StructureTreeTableExpand, {
                props: {
                  row: params.row
                }
              })
            }
          },
          {
            title: '名称',
            key: 'layoutItemId',
            render: (h, params) => {
              return h('span', {
                attrs: {
                  title: params.row.layoutItemId
                }
              }, '布局块('+params.row.layoutItemId.substring(0, 5)+'..)')
            }
          },
          {
            title: '操作',
            key: 'action',
            align: 'center',
            width: 120,
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: params.row.layoutItemDisplay == 'block' ? 'default': 'error',
                    size: 'small',
                    icon: params.row.layoutItemDisplay == 'block' ? 'md-eye': 'md-eye-off'
                  },
                  attrs: {
                    title: '切换显示隐藏'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.showAndHideLayoutItem(params.row)
                    }
                  }
                }),h('Button', {
                  props: {
                    type: 'default',
                    size: 'small',
                    icon: 'md-locate'
                  },
                  attrs: {
                    title: '定位布局块'
                  },
                  style: {

                  },
                  on: {
                    click: () => {
                      this.locationTargetLayoutItem(params.row)
                    }
                  }
                })
              ]);
            }
          }
        ]
      }
    },
    mounted() {

    },
    methods: {

      allShowAndHide () {

      },

      structureTreeTableRowClick (row, index) {
        // 如果当前点击的布局块没有关联组件，那么就清空rightSidebarFuncCompConfigFormName状态
        if (!row.componentId) {
          this.$store.commit('designer/setRightSidebarFuncCompConfigFormName', '');
        }else {
          this.$store.commit('designer/setRightSidebarFuncCompConfigFormName', row.componentName + 'Form');
        }

        if(this.pageMetadata.developCanvas == 'AbsoluteLayoutCanvas') {

          this.$store.commit('designer/setRightSidebarLayoutItemConfigFormName', 'AbsoluteLayoutItemForm');
        }else if(this.pageMetadata.developCanvas == 'ReactiveLayoutCanvas') {

          this.$store.commit('designer/setRightSidebarLayoutItemConfigFormName', 'ReactiveLayoutItemForm');
        }
        this.$store.commit('designer/setCurrentSelectLayoutItemId', row.layoutItemId)
      },

      showAndHideLayoutItem (row) {
        let currentDisplay = row.layoutItemDisplay;
        if (currentDisplay == 'block') {
          this.$store.commit('designer/setLayoutItemDisplay', {id: row.layoutItemId, display: 'none'});
        }else if (currentDisplay == 'none') {
          this.$store.commit('designer/setLayoutItemDisplay', {id: row.layoutItemId, display: 'block'});
        }
      },

      locationTargetLayoutItem (row) {
        this.$store.commit('designer/setCurrentSelectLayoutItemId', row.layoutItemId);
        this.$store.commit('designer/setRightSidebarFuncCompConfigFormName', '');
      }
    },
    computed: {
      ...mapFields({
        pageMetadata: 'pageMetadata',
        currentSelectLayoutItemId: 'currentSelectLayoutItemId'
      }),
      structureTreeData () {
        let layoutItems = [];
        this.pageMetadata.layout.layoutItems.forEach((item)=>{
          let layoutItem = {
            layoutItemId: item.id,
            layoutItemDisplay: item.layoutItemConfigData.display,
            componentId: item.component.id,
            componentName: item.component.name,
            _expanded: true
          };

          // if(this.currentSelectLayoutItemId == item.id) {
          //   layoutItem._highlight = true
          // }else {
          //   layoutItem._highlight = false
          // }

          layoutItems.push(layoutItem)
        });
        return layoutItems;
      }
    }
  }
</script>

<style scoped>
  >>> td.ivu-table-expanded-cell {
    padding: 10px;
  }
</style>
